<template>
  <div class="error-view gap-col-24 bg-background">
    <img :src="image" :alt="message" />
    <div class="msg font-size-14 font-weight-500 line-height-140 text-input">{{ message }}</div>
    <div v-if="extMessage" class="font-size-14 font-weight-500 line-height-140 text-input">{{ extMessage }}</div>
  </div>
</template>

<script setup>
defineProps({
  message: { type: String },
  image: { type: String },
  extMessage: { type: String },
})
</script>

<style lang="scss" scoped>
.error-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    max-width: 6.5rem;
  }
}
</style>
